import React, { Component } from 'react'
import Routes from './routes/Routes'
// ! 这里将intl的初始化放到App组件里面来进行  经过实测这样还是会遇到intl.get()为空的情况
import intl from 'react-intl-universal'
import resource from './locales/resource'
import './plugins/font-awesome'
import './plugins/axios'

// 可以借助intl.determineLocale获取当前浏览器的语言环境设置初始化的语言环境
// 这个函数会返回字符串 就是当前获取到的环境
const lng = intl.determineLocale({
  // 但是这里建议不要使用localStorage来更改当前页面语言环境
  // 因为当你修改localStorage的lang字段之后没有刷新页面 是不会更改语言的 所以使用 url 或者cookie
  // localStorageLocaleKey:'lang', // 这个用于从localStorage中确定语言环境,寻找 lang 这个键名
  // *注意 当这里声明了但是匹配不上时 会默认为当前浏览器的语言环境 也就是 navigator.language
  urlLocaleKey: 'lang',
  localStorageLocaleKey: 'lang',
  fallbackLocale: 'zh-CN' // 当所有的匹配不上时就使用这个备用的
})

class App extends Component {
  // 这里很重要 在没有constructor时 将state写在最前面就相当于 在constructor里面写state
  // isDone用于判断intl是否初始化完成
  state = { isDone: false }

  componentDidMount () {
    // 组件挂载完成后进行初始化intl
    this.loadLocales()
  }

  // 这里是intl用于初始化的函数
  loadLocales = () => {
    intl.init({
      currentLocale: lng,
      fallbackLocale: 'zh_CN',
      locales: resource
    }).then(() => {
      // 这里时初始化完成后触发
      this.setState({ isDone: true })
    })
  }

  render () {
    return (
      // !第一次挂载时 因为isDone为false 所以并没有挂载渲染Routes  当初始化完成时才进行渲染
      // !这样其实很重要,保证了一下所有的组件所处的环境都是intl渲染完成后的   不然的话 会遇到 intl.get()获取到空的情况
      // !!!经过实测 这样还是会遇到intl.get()为空的情况 目前没有好的方法
      // !只能在componentDidMount()进行定义 或者在 render() 中进行定义
      // !好像还有一种方法  但是对于我目前的情况 不是很适用 https://blog.csdn.net/chenqk_123/article/details/102858073
      this.state.isDone && <Routes />
    )
  }
}

export default App
